<template>
  <div>
    <div>
      <div v-if="shoplist.length==1" class="title_div">
        <span>{{shopname}}</span>
      </div>
      <div v-else>
        <span>{{shopname}}</span>
        <ul v-show="false">
          <li v-for="item in shoplist">
            {{item.shop_name}}
          </li>
        </ul>
      </div>
    </div>


    <div style="margin: 20px 0;" v-show="isshow">
      <div style="margin: 20px 0;color: #606266;text-align: center;">
        <span>设备ID：{{screenid}}</span>
      </div>
      <mt-field label="设备名称" placeholder="请设置设备名称" v-model="screenname"></mt-field>
    </div>

    <div style="margin: 20px 0;" v-show="isshow">
      <mt-radio
        title="屏幕展示类型"
        v-model=showType
        :options=options>
      </mt-radio>
    </div>

    <div style="margin: 155px 80px;" v-show="isshow">
      <mt-button type="primary" size="large" @click.native="screenbind">确定</mt-button>
    </div>

    <div v-show="!isshow">
      <div class="div01">
        <span>设备ID：{{screenid}}</span>
      </div>
      <div class="div01">
        <span>设备名称：{{screenname}}</span>
      </div>
      <div class="div01">
        <span v-if="showType==0">设备类型：骑手信息</span>
        <span v-if="showType==1">设备类型：门店菜单</span>
        <span v-if="showType==2">设备类型：广告轮播</span>
        <span v-if="showType==3">设备类型：广告轮播</span>
      </div>
      <div style="margin-top: 200px;color: #606266;text-align: center;">
        <span style="font-size: 100px;display: block;">
          <svg-icon icon-class="fan_success"/>
        </span>
        <span>设置成功</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {Radio} from 'mint-ui';
  import {Button} from 'mint-ui';
  import {Field} from 'mint-ui';
  import {Toast} from 'mint-ui';
  import store from '@/store';
  import {
    screenbind
  } from '@/api/screenbind';

  export default {
    components: {},
    name: 'login',
    data() {
      return {
        //设备ID
        screenid: screenid,
        showType: 0,
        screenname: null,
        isshow: true,
        shopname: store.getters.shops[0].shop_name,
        shoplist: store.getters.shops,
        options: [
          {
            label: '骑手信息',
            value: '0'
          },
          {
            label: '门店菜单',
            value: '1'
          },
          {
            label: '广告轮播',
            value: '2'
          },
          {
            label: '配餐信息',
            value: '3'
          }
        ]
      }
    },
    methods: {
      screenbind() {
        var form = {
          screenName: this.screenname,
          screenId: this.screenid,
          shopId: store.getters.shops[0].shop_id,
          showType: this.showType
        }
        console.log(form)
        screenbind(form).then(response => {
          if (response.status === 200) {
            this.isshow = false;
          } else {
            Toast(response.message);
          }
        })
      }
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .title_div {
    text-align: center;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    color: #303133;
  }

  .div01 {
    margin: 20px 0;
    color: #606266;
    text-align: center;
  }
</style>
